<template>
  <div class="hawkContent">
    <hawk-breadcrumb></hawk-breadcrumb>

    <!-- <el-row :gutter="20" style="padding-left: 20px">
      <el-col
        :span="4"
        style="float: right; text-align: right; padding-right: 30px"
      >
         <el-button type="hawkCreate" @click="editCpu">创建CPU</el-button> 
         <el-button plain>导入</el-button> 
      </el-col>
    </el-row> -->
    <el-row :gutter="20" style="padding-left: 20px">
      <el-col :span="3">
        <el-input placeholder="请输名称搜索" v-model="queryForm.query.name">
        </el-input>
      </el-col>
      <el-col :span="3">
        <el-input placeholder="请输负责人搜索" v-model="queryForm.query.principal">
        </el-input>
      </el-col>
      <el-col :span="3">
        <el-input placeholder="请输ip精确搜索" v-model="queryForm.query.ip">
        </el-input>
      </el-col>
      <el-col :span="3">
        <el-input placeholder="请输业务系统名搜索"
                  v-model="queryForm.query.businessname">
        </el-input>
      </el-col>
      <el-col :span="4">
        <el-button type="hawkSearch" @click="search">搜索</el-button>
        <el-button plain @click="reSet">重置</el-button>
      </el-col>
      <!-- <el-col
        :span="4"
        style="float: right; text-align: right; padding-right: 30px"
      >
        <el-button type="hawkCreate" @click="editUser">添加业务系统</el-button>
        <el-button plain>导入</el-button>
      </el-col> -->
    </el-row>
    <hawk-table :table-data="tableData" v-model="multipleSelection"
                :page="queryForm.page" :number='true' :options="[
        { key: 'name', label: '名称',width:'160' },
        { key: 'ip', label: 'ip' ,width:'100' },
        { key: 'type', label: '类型' , width:'80' },
        { key: 'belongCabinetRoom', label: '所属机房',width:'110' },
        { key: 'businessname', label: '业务系统' ,width:'110'},
        { key: 'isDatabase', label: '数据库' , width:'60' },
        { key: 'belongHost', label: '所属主机', width:'110' },
        { key: 'gateway', label: '网关' , width:'90'},
        { key: 'subnet', label: '子网' , width:'90'},
        { key: 'dns', label: 'DNS' , width:'90'},
        { key: 'mac', label: 'MAC地址' , width:'100'},
        { key: 'principalPhone', label: '负责人-电话' ,width:'130'},
        { key: 'companyDepartment', label: '公司部门' , width:'130'},
      ]">
      <!-- { key: 'handle', label: '操作' }, -->

      <template #principalPhone="{ row }">
        {{  row.sysUser? row.sysUser.nickName+'-'+row.sysUser.mobile :'无' }}
      </template>

      <template #mac="{ row }">
        {{ row.macAddress?row.macAddress:'' }}
      </template>

      <template #belongHost="{ row }">
        {{ row.installid && row.belongHosts ? row.belongHosts.name:'无' }}
      </template>

      <template #isDatabase="{ row }">
        {{ row.isDatabase==0?'是':'否' }}
      </template>

      <template #businessname="{ row }">
        {{ row.businessid>0?row.business.name:'无' }}
      </template>

      <!-- 将公司部门两行数据放在一列 -->
      <template #companyDepartment="{ row }">
        {{ row.department?row.department.name:'无' }}
      </template>

      <template #belongCabinetRoom="{ row }">
        {{ row.computerRoom ? row.computerRoom.name : '' }}
      </template>

      <!-- <template #handle="{ row }"> -->
        <!-- <span class="hawk-text-btn" @click="editCpu(row)">编辑</span> -->
        <!-- <span class="hawk-text-divider">|</span> -->
        <!-- <span class="hawk-text-btn" @click="delCpu(row)">删除</span>
        <span class="hawk-text-divider">|</span> -->
        <!-- <span class="hawk-text-btn" @click="particulars(row, 1)">详情</span> -->
      <!-- </template> -->
    </hawk-table>
    <div class="bottom-btns">
      <div class="bottom-btns-left-num">
        <!-- {{ multipleSelection.length }} 选择 -->
      </div>
      <!-- <div class="bottom-btns-left">
        <div class="bottom-btns-left-num">
          {{ multipleSelection.length }} 选择
        </div>
        <el-button type="hawkDelete">批量删除</el-button>
        <el-button plain>导出</el-button>
      </div> -->
      <el-pagination background @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page.sync="queryForm.page.current"
                     :page-sizes="[10, 20, 50, 100]"
                     :page-size="queryForm.page.size"
                     layout=" prev, pager, next,sizes" :total="total">
      </el-pagination>
    </div>
    <!-- <host-add ref="add" @init="init"></host-add> -->
  </div>
</template>

<script>
/*
 * @author 王洪展
 * @description 资产列表主机列表和编辑
 * @api 192.168.0.68:8081/cmdb-host/
 * @since 2021-11-08
 * @update 2021-11-08
 * @modifier 王洪展
 * @bug 无
 * @version v1.0.0
 */
import { getList, doEdit, search } from '@/api/assets/list/host'
// import HostAdd from './components/hostAdd.vue'

export default {
  // components: { HostAdd },
  //import引入的组件需要注入到对象中才能使用",
  data () {
    return {
      tableData: [],
      total: 0,
      formTitle: '',
      addDialogVisible: false,
      multipleSelection: [],
      addForm: {},
      addFormRules: {},
      particularsForm: {},
      particularsFormRules: {},

      queryForm: {
        query: {
          name: '', // 主机名
          principal: '', // 	负责人名称
          ip: '', // 
          businessname: '',
        },
        page: {
          current: 1,
          size: 10,
        },

      },
    }
  },

  //监听属性 类似于data概念",
  computed: {
    cellStyle () {
      return {
        padding: '8px 0',
      }
    },
  },
  //监控data中的数据变化",
  watch: {},
  //方法集合",
  methods: {
    async search () {
      // const res = await search(this.queryForm.query.hshelfaddress.filedValue)
      // console.log('55555', res)
      // this.tableData = res
      // this.total = res.count
      this.init()
    },
    reSet () {
      this.queryForm = this.$options.data().queryForm
      this.init()
    },
    async init () {
      const { data } = await getList(this.queryForm)
      console.log(data)
      this.tableData = data.records
      this.total = data.total
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    handleSizeChange (val) {
      console.log(val)
      this.page.size = val
      this.init()
    },
    handleCurrentChange (val) {
      this.page.current = val
      this.init()
    },
    save () {
      this.$refs.addFormRef.validate(async (valid) => {
        console.log(valid)
        if (!valid) return
        if (this.addForm.id) {
          await doEdit(this.addForm)
        }
        this.addDialogVisible = false
        this.init()
      })
    },

    editCpu (row) {
      this.$refs.add.open(row)
    },
    particulars (row) {
      this.$refs.info.open(row)
    },
    addDialogClosed () {
      this.addForm = this.$options.data().addForm
      this.addDialogVisible = false
      this.$refs.addFormRef.resetFields()
    },
  },
  //生命周期 - 创建之前",数据模型未加载,方法未加载,html模板未加载
  beforeCreate () { },

  //生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
  created () {
    this.init()
  },

  //生命周期 - 挂载完成（可以访问DOM元素）",html模板已渲染
  mounted () { },
}
</script>

<style lang="scss">
.hawkContent {
  width: calc(100% - 40px);
  min-height: calc(100vh - 140px);
  background: #fff;
  padding: 20px;
  border-radius: 8px;

  .inputLabel {
    font-size: 14px;
    color: #333333;
  }

  .bottom-btns {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    margin-top: 10px;

    &-left {
      display: flex;
      align-items: center;

      &-num {
        margin-right: 10px;
        color: #333333;
        font-size: 14px;
      }
    }
  }
}
</style>
